<script setup>
import Dialog from "./dialog.vue"
import { ref, reactive, nextTick } from "vue"
import OrderSearch from './search.vue';

let tableData = ref([{
    info: "/src/assets/images/book.png", "number": "《活着》",
    "price": "￥25.00", "type": "1", "section": "￥25.00", "status": "待发货",
    "time": "2023-11-11 12:00:00", "id": "1"
},])
let options = ref([{ value: "1", label: "待发货" }, { value: "2", label: "已发货" }, { value: "3", label: "已完成", }])
let value = ref('111')
let date = ref('')
let isDialog = ref(false)
function handleEdit() {
    isDialog.value = true
}
function closeDialog() {
    isDialog.value = false
}
let pageSize4 = ref(100)

let  disabled=ref(false)
function handleSizeChange(){}
function handleCurrentChange(){}

const searchParams = reactive({
  orderNo: undefined,
  orderStatus: undefined,
  orderTime: undefined,
  settlementStatus: undefined,
})
</script>

<template>
    <div >
        <OrderSearch v-model:model="searchParams"></OrderSearch>
        <div class="saletable">
            <el-table :data="tableData" style="width: 100%;">
                <el-table-column prop="info" label="商品信息">
                    <template #default="{ row }">
                        <div style="width: 250px;height: 80px;display: flex;">
                            <div><img :src="row.info" alt="商品图片" style="width: 80px; height: 80px;"></div>
                            <div style="margin-left: 16px;">
                                <div style="color: #111827;font-size: 14px;height: 23px;">智能无线蓝牙耳机 Pro</div>
                                <div style="color: #6B7280;height: 20px;">规格：黑色 标准版</div>
                                <div style="color: #6B7280;height: 20px;">数量:1</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="订单编号" width="200" />
                <el-table-column prop="time" label="下单时间" width="180" />
                <el-table-column prop="price" label="订单金额" width="100">
                    <template #default="{ row }">
                        <span style="color: #EF4444;">{{ row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="订单状态" width="120">
                    <template #default="{ row }">
                        <div style="color: #E6A23C; background-color: #FDF6EC;width: 56.02px;display: flex;
                        justify-content: center;">{{ row.type }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="section" label="发货方式" width="120">
                    <template #default="{ row }">
                        <div style="color: #67C23A;background: #F0F9EB;;width: 68.02px;;display: flex;
                        justify-content: center;">{{ row.section }}</div>
                    </template>

                </el-table-column>
                <el-table-column prop="todo" label="操作" width="200">
                    <template #default="{ row }">
                        <span @click="handleEdit()" class="operate">查看详情</span>
                        <span class="operate" style="color: #67C23A;"><img class="icon" style="color: white;"
                                src="@/assets/images/ordermangent/greemdpwnload.png" alt="">导出面单</span>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <div class="bottom"><el-pagination class="currentPage" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" 
            layout="total, sizes, prev, pager, next" :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" /></div>
        
    </div>
    <Dialog :isDialog @closeDialog="closeDialog"></Dialog>


</template>

<style lang="scss" scoped>
.top {
    height: 85px;
    border-bottom: 1px solid #F2F3F5;
    margin-left: 18px;

}

.tabs-line {
    .button {
        width: 84px;
        height: 32px;


    }

    .icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
}

.tabs-item {
    display: flex;
    align-items: center;
    // justify-content: space-around;
    width: 330px;
    height: 32px;

    .tabs-item-title {
        font-family: AlibabaPuHuiTi;
        font-size: 14px;
        font-weight: normal;
        line-height: 22px;
        letter-spacing: 0px;
        color: #4E5969;
        margin-right: 16px;
    }
}

.saletable {
    left: 0;
    height: 440px;

    //    background-color: black;
    .operate {
        margin-right: 11px;
        font-family: Roboto;
        font-size: 14px;
        font-weight: 500;
        color: #409EFF;

        .icon {
            width: 14px;
            height: 14px;
            margin-right: 4px;
        }
    }
}
.bottom{
    display: flex;
    justify-content: flex-end;
   
}

</style>
<style lang="scss">
.tabs-line {
    display: flex;
    .date-picker {
    .el-date-editor--daterange {
        width: 256px;
        height: 32px;
        box-sizing: border-box;
        background: #F7F8FA;
    }

    .el-range__icon {
        float: right;
    }

    .el-range-input {
        width: 80px;
    }

    .el-date-editor {
        padding-left: 0;
    }

    .el-date-editor .el-range__close-icon--hidden {
        visibility: visible;
        opacity: 1;
    }

    .el-input__icon {
        width: 0;
        height: 0;
    }

    .el-range-separator {
        width: 10px;
        flex: 0;
        margin-left: 41px;

    }

    .el-range__close-icon {
        background: url('@/assets/images/ordermangent/date.png') no-repeat center;
        background-size: contain;
        width: 20px;
        /* 根据你的图标大小调整宽度 */
        height: 20px;
        /* 根据你的图标大小调整高度 */
    }

    .el-range__close-icon svg {
        visibility: hidden;
    }

}
    .el-select__wrapper {
        font-family: AlibabaPuHuiTi;
        font-size: 14px;
        font-weight: normal;
        line-height: 22px;
        letter-spacing: 0px;
        color: #86909C;
        background-color: #F7F8FA !important;
    }

    .el-input__wrapper {
        background-color: #F7F8FA;
    }

}

.el-tabs__item {
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0px;


}


</style>